<template>
	<view class="container">
		<view>
			<image style="width: 750rpx;height: 260rpx;" :src="itemDetail.coverUrl" mode='aspectFill'></image>
		</view>
		<view class="main" style="padding-left: 30rpx;padding-top: 30rpx;background-color: #fff;">
			<view class="lesseeName" style="font-size: 32rpx;font-weight: bold;">{{ itemDetail.name }}</view>
			<view class="phone" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;border-bottom: 1rpx solid #eeeeee;padding: 30rpx 0;margin-top: 20rpx;">
				<view style="display: flex;flex-direction: row;">
					<u-icon name="phone-fill" color='#666' size='36rpx'></u-icon>
					<text style="margin-left: 20rpx;">联系电话</text>
				</view>
				<view style="margin-right: 30rpx;display: flex;flex-direction: row;align-items: center;">
					<view class="">{{ itemDetail.phone }}</view>
					<view @click="operateAction('call', itemDetail)"
					style="width: 100rpx;height: 50rpx;margin-left: 10rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 28rpx;border-radius: 4rpx;border: 1rpx solid #DD4949;color: #DD4949;">
						拨打
					</view>
				</view>
			</view>
			<view class="addr" style="display: flex;flex-direction: row;align-items: center;;padding: 30rpx 0;justify-content: space-between;">
				<view style="display: flex;flex-direction: row;">
					<u-icon name="map-fill" color='#666' size='36rpx'></u-icon>
					<view style="margin-right: 30rpx;margin-left: 20rpx;" class="limitLineNumOfTwo">{{ itemDetail.addr }}</view>
				</view>
				<view style="margin-right: 30rpx;display: flex;flex-direction: row;align-items: center;">
					<view @click="operateAction('openLocation', itemDetail)"
					style="width: 100rpx;height: 50rpx;margin-left: 10rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 28rpx;border-radius: 4rpx;border: 1rpx solid #DD4949;color: #DD4949;">
						导航
					</view>
				</view>
			</view>
		</view>
		<view class="VIP" 
		v-for="(item, index) in memberCartList" :key='index'
		style="padding: 30rpx;margin-top: 10rpx;background-color: #fff;">
			<view class="lesseeName" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<view style="font-size: 32rpx;font-weight: bold;color: #FFF;">会员权益</view>
				<view @click="operateAction('pay', item)" v-if="!item.userCartId"
				style="width: 180rpx;height: 60rpx;margin-left: 10rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 28rpx;border-radius: 8rpx;color: #FFF;background-color: #000;">
					开通会员 >
				</view>
				<view @click="operateAction('look', item)" v-else
				style="width: 180rpx;height: 60rpx;margin-left: 10rpx;display: flex;flex-direction: row;align-items: center;justify-content: center;font-size: 28rpx;border-radius: 8rpx;color: #FFF;background-color: #000;">
					查看详情 >
				</view>
			</view>
			<view class="phone" style="margin-top: 30rpx;color: #FFF;font-size: 26rpx">
				{{item.memberCartIntr}}
			</view>
		</view>
		<view class="main" style="padding: 30rpx 0;padding-left: 30rpx;margin-top: 10rpx;background-color: #fff;">
			<view class="lesseeName" style="font-size: 32rpx;font-weight: bold;">商家介绍</view>
			<view class="phone" style="margin-top: 30rpx;" v-if="itemDetail.intro">
				{{ itemDetail.intro }}
			</view>
		</view>
		<view style="background-color: #FFF;margin-top: 20rpx;">
			<u-tabs :list="tabsForCates" :current="current" :scrollable='true' @click="tabClick" lineColor="#DD4949" :activeStyle="{color: '#DD4949'}"></u-tabs>
		</view>
		<itemListComponent @click='itemHandle' :itemList="itemList"></itemListComponent>
		<view style="padding: 150rpx 0;" v-if='showEmpty'>
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="safeArea"></view>
	</view>
</template>

<script>
	import { lessee } from '@/api/lessee.js'
	import { memberCart } from '@/api/memberCart.js'
	import {
		merchant
	} from '@/api/merchant.js'
	import itemListComponent from '@/components/itemListComponent/index.vue'
	import { calculateDistance } from '@/common/utils/calculateDistance.js'
	export default{
		components: { itemListComponent },
		data() {
			return {
				page: 1,
				size: 20,
				itemList: [],
				showEmpty: false,
				isLastPage: false,
				lesseeId: '',
				itemDetail: {},
				memberCartList: [],
				tabsForCates: [{id: '', name: '全部商品'}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
			}
		},
		onLoad() {
			if(this.$Route.query.lesseeId){
				this.lesseeId = this.$Route.query.lesseeId
			}
			this.getItemDetail()
			this.getMemberCartList()
			this.getCateList()
			this.calculateDistance()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getItemDetail()
			this.getItemList()
		},
		onReachBottom() {
			if(this.isLastPage) {
				return
			}
			this.getItemList()
		},
		methods:{
			calculateDistance() {
				var params = {
					start: '',
					dest: '39.984060,116.307520;39.984060,116.507520'
				}
				calculateDistance(params).then(res=>{
					console.log('计算返回', res)
					
				})
			},
			tabClick(item){
				this.tabsChange(item.index)
			},
			tabsChange(index){
				this.current = index;
				this.page = 1
				this.getItemList()
			},
			operateAction(scene, val) {
				switch (scene) {
					case 'call':
						uni.makePhoneCall({
							phoneNumber: val.phone, // 电话号码
							success: function () {
							  console.log('拨打电话成功');
							},
							fail: function () {
							  console.log('拨打电话失败');
							}
						})
						break;
					case 'look':
						this.$Router.push({
							name: 'vipCartDetail',
							params: {
								userCartId: val.userCartId
							}
						})
						break;
					case 'pay':
						var params = {}
						params.lessee = this.lesseeId
						params.realPay = val.buyPrice
						params.remark = ''
						params.sendType = 'noSend'
						params.scene = 'memberCart'
						params.orderItemList = [{
							item: val.id,
							itemName: val.name,
							payCount: 1,
							price: val.buyPrice,
							coverUrl: val.coverUrl
						}]
						this.$Router.push({
							name: 'pay',
							params: params
						})
						break;
					case 'openLocation':
						uni.openLocation({
							latitude: parseFloat(val.latitude),
							longitude: parseFloat(val.longitude),
							success: function () {
								// console.log('success');
							}
						});
						break;
					default:
						break;
				}
			},
			itemHandle(val){
				this.$Router.push({
					name: 'itemDetail',
					params: {
						itemId: val.id
					}
				})
			},
			getItemDetail() {
				lessee.getItemById({
					obj_id: this.lesseeId
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						this.itemDetail = res.data.data
					}
				})
			},
			getMemberCartList() {
				var params = {
					page: this.page,
					size: this.size,
					lessee: this.lesseeId
				}
				memberCart.getMemberCartList(params).then(res => {
					if (res.data.code == 10000) {
						this.memberCartList = res.data.data.list
					}
				})
			},
			getCateList() {
				merchant.getCateList({
					lessee: this.lesseeId,
				}).then(res => {
					if(res.data.code == 10000){
						var cateList = res.data.data.list
						this.tabsForCates = [...this.tabsForCates, ...cateList]
						this.tabsChange(this.current)
					}
				})
			},
			getItemList() {
				var params = {
					page: this.page,
					size: this.size,
					lessee: this.lesseeId,
					checkStatus: 'PASS',
					status: 1,
				}
				var currentTab = this.tabsForCates[this.current]
				if(currentTab.id){
					params.cate = currentTab.id
				}
				merchant.getItemListForC(params).then(res => {
					uni.stopPullDownRefresh();
					if (res.data.code == 10000) {
						if(this.page == 1){
							this.itemList = []
						}
						var list = res.data.data.list
						this.itemList = [...this.itemList, ...list]
						this.showEmpty = this.itemList.length<1
						if (res.data.data.next) {
							this.page += 1
						} else {
							this.isLastPage = true
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.VIP{
		width: 658rpx;
		height: 160rpx;
		margin-left: 16rpx;
		border-radius: 16rpx;
		background-image: linear-gradient(30deg, #4d41d3, #9da5f9);
	}
</style>